﻿@model FrogFoot.Areas.Admin.Models.SettingsViewModel

@{
    ViewBag.Title = "Estates";
}

<h2>Estates</h2>

<ul id="locationTabs" class="nav nav-tabs">
    @*<li class="active"><a data-toggle="tab" href="#estates">Estates</a></li>
    <li><a data-toggle="tab" href="#api">Map API</a></li>*@
</ul>

<div class="tab-content">
    <div id="estates" class="tab-pane fade in active">
        <div class="form-group">
            <table id="estatesTable" class="table table-striped table-responsive">
                <thead>
                    <tr>
                        <td><label>Name</label></td>
                        <td><label>Code</label></td>
                        <td><label>Suburb</label></td>
                        <td></td>
                        <td></td>
                    </tr>
                </thead>
                <tbody>

                    @foreach (var estate in Model.Estates)
                    {
                        <tr data-id="@estate.EstateId">
                            <td>@Html.TextBoxFor(x => estate.Name, new { @class = "form-control name" })</td>
                            <td>@Html.TextBoxFor(x => estate.EstateCode, new { @class = "form-control code" })</td>
                            <td>
                                <input data-id="@estate.EstateId" type="hidden" value="@estate.LocationId" />
                                @Html.DropDownListFor(x => estate.LocationId, new SelectList(Model.Locations, "LocationId", "Name", estate.LocationId), "Select Suburb", new { @class = "form-control locationId", @style = "width: 150px;", data_id = estate.EstateId })
                                @Html.ValidationMessageFor(model => model.Estate.EstateId, "", new { @class = "text-danger" })
                            </td>
                            <td>
                                <input type="button" class="btnUpdate btn btn-default" value="Update" />
                            </td>
                            <td>
                                @Html.ActionLink("Estate Discounts", "EstateDiscount", new { estateId = @estate.EstateId }, new { @class = "btn btn-default" })
                            </td>
                            <td>
                                @Html.ActionLink("Delete", "DeleteEstate", new { id = @estate.EstateId }, new { @class = "btn btn-default" })
                            </td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>

        <hr />

        <div class="form-group" style="margin-top: 30px;">
            <h3>New Estate</h3>
            <div class="row">
                <div class="col-sm-4">
                    @Html.TextBoxFor(n => n.Estate.Name, new { @class = "form-control", @placeholder = "Estate Name" })
                </div>
                <div class="col-sm-4">
                    @Html.TextBoxFor(n => n.Estate.EstateCode, new { @class = "form-control", @placeholder = "Estate Name" })
                </div>
                <div class="col-sm-2">
                    @Html.DropDownListFor(model => model.Estate.LocationId, new SelectList(Model.Locations, "LocationId", "Name", 0), "Select Suburb", new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.Estate.EstateId, "", new { @class = "text-danger" })
                </div>
                <div class="col-sm-2">
                    <div id="addEstate" class="btn btn-success">Add Estate</div>
                </div>
            </div>
        </div>
    </div>

    <div id="api" class="tab-pane fade">
        <div id="apiResults">
            <!-- placeholder for API results-->
        </div>
    </div>
</div>

@section scripts{
    <script type="text/javascript">
        $(function () {
            $('select.locationId').each(function (i, x) {
                var eId = $(this).data('id');
                var lId = $('input[data-id=' + eId + ']').val();
                $(this).val(lId);
            });

            $('#addEstate').on('click', function () {
                if ($('#Estate_Name').val().length && $('#Estate_LocationId').val().length) {
                    $.ajax({
                        type: "GET",
                        dataType: "json",
                        url: '@Url.Action("SaveEstate", "Gridding")',
                        contentType: 'application/json',
                        data: {
                            name: $('#Estate_Name').val(),
                            code: $('#Estate_EstateCode').val(),
                            locationId: $('#Estate_LocationId').val()
                        },
                        success: function (result) {
                            if (result.success) {
                                location.reload();
                            }
                        }
                    });
                }
            });

            $('#estatesTable').on('click', '.btnUpdate', function () {
                var tr = $(this).closest('tr');
                var id = tr.data('id');
                var name = tr.find('.name').val();
                var code = tr.find('.code').val();
                var locationId = tr.find('select').val();

                $.ajax({
                    type: "GET",
                    dataType: "json",
                    url: '@Url.Action("UpdateEstate", "Gridding")',
                    contentType: 'application/json',
                    data: { id: id, name: name, code: code, locationId: locationId },
                    success: function (result) {
                        if (result.success) {
                            location.reload();
                        }
                    }
                });
            });
        })
    </script>
}
